<script setup lang="ts">
import EChart from "~/contentScripts/views/echart.vue";
import {SycmBrand, SycmBrandLists} from "~/contentScripts/views/sycm/brand_monitor/SycmBrandMonitor";
import Trans from "../../../../../utils/sycm/trans";

const props = defineProps({
  brandLists: {
    type: Object as PropType<SycmBrandLists>,
    default: {},
  },
  showZs: {
    type: Boolean,
    default: false,
  },
})
const genderOptions = ref({
  title: {
    // text: '职业分布',
    subtext: '性别分析',
    left: 'left'
  },
  legend: {
    // 底部
    bottom: 0,
  },
  tooltip: {},
  dataset: {
    dimensions: ['name', 'brandName1', 'brandName2', 'brandName3'],
    source: [
      {brandName: 'Matcha Latte', brand1: 43.3, brand2: 85.8, brand3: 93.7},
    ]
  },
  xAxis: {type: 'category'},
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
});
const ageOptions = ref({
  title: {
    // text: '职业分布',
    subtext: '年龄分析',
    left: 'left'
  },
  legend: {
    // 底部
    bottom: 0,
  },
  tooltip: {},
  dataset: {
    dimensions: ['name', 'brandName1', 'brandName2', 'brandName3'],
    source: [
      {brandName: 'Matcha Latte', brand1: 43.3, brand2: 85.8, brand3: 93.7},
    ]
  },
  xAxis: {type: 'category'},
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
});
const careerOptions = ref({
  title: {
    // text: '职业分布',
    subtext: '职业分析',
    left: 'left'
  },
  legend: {
    // 底部
    bottom: 0,
  },
  tooltip: {},
  dataset: {
    dimensions: ['name', 'brandName1', 'brandName2', 'brandName3'],
    source: [
      {brandName: 'Matcha Latte', brand1: 43.3, brand2: 85.8, brand3: 93.7},
    ]
  },
  xAxis: {type: 'category'},
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
});
const tabs = [
  [
    {
      title: '交易金额',
      titleZs: '交易指数',
      key: 'tradeIndex',
    },
    {
      title: '访客数',
      titleZs: '访客数',
      key: 'uv',
    },
    {
      title: '支付转化率',
      titleZs: '支付转化指数',
      key: 'payRateIndex',
    },
    {
      title: '支付买家数',
      titleZs: '客群指数',
      key: 'payByrCntIndex',
    },
    {
      title: '买家数占比',
      titleZs: '客群指数',
      key: 'payByrCntRate',
    },
    {
      title: '客单价',
      titleZs: '客单价',
      key: 'customerPrice',
    },
    {
      title: 'UV价值',
      titleZs: 'UV价值',
      key: 'uvValue',
    },
  ],
  // [
  //
  // ],
]
const activeKey = ref('tradeIndex');
const calcOptions = () => {
  // 注入性别数据
  // 从品牌1和品牌2 品牌3 中获取 一个非空的CustomerPropertyPortrait.gender.uv.length
  const brand1 = props.brandLists?.brand1;
  const brand2 = props.brandLists?.brand2;
  const brand3 = props.brandLists?.brand3;
  let calcBrand: SycmBrand | null = null;
  let dimensions = ['name'];
  if (brand1 && brand1.CustomerPropertyPortrait && brand1.CustomerPropertyPortrait.gender.uv.length > 0) {
    dimensions.push(brand1.name);
    calcBrand = brand1;
  }
  if (brand2 && brand2.CustomerPropertyPortrait && brand2.CustomerPropertyPortrait.gender.uv.length > 0) {
    dimensions.push(brand2.name);
    if (calcBrand === null) {
      calcBrand = brand2;
    }
  }
  if (brand3 && brand3.CustomerPropertyPortrait && brand3.CustomerPropertyPortrait.gender.uv.length > 0) {
    dimensions.push(brand3.name);
    if (calcBrand === null) {
      calcBrand = brand3;
    }
  }
  const series: any[] = [];
  dimensions.map((item, index) => {
    if (index > 0) {
      series.push({
        type: 'bar',
      });
    }
  });
  const assignMapData = (source: any[], key: string) => {
    if (calcBrand && calcBrand.CustomerPropertyPortrait && typeof calcBrand.CustomerPropertyPortrait[key].uv !== 'undefined') {
      for (let index = 0; index < calcBrand.CustomerPropertyPortrait[key].uv.length; index++) {
        let item = calcBrand.CustomerPropertyPortrait[key].uv[index];
        let result: any = {
          name: item.name,
        };
        if (dimensions.includes(props.brandLists.brand1?.name)) {
          result[props.brandLists.brand1.name] = getActiveKeyData(props.brandLists.brand1.CustomerPropertyPortrait[key], index)
        }
        if (dimensions.includes(props.brandLists.brand2?.name)) {
          result[props.brandLists.brand2.name] = getActiveKeyData(props.brandLists.brand2.CustomerPropertyPortrait[key], index)
        }
        if (dimensions.includes(props.brandLists.brand3?.name)) {
          result[props.brandLists.brand3.name] = getActiveKeyData(props.brandLists.brand3.CustomerPropertyPortrait[key], index)
        }
        source.push(result);
      }
    }
  }
  // 注入性别数据
  const genderSource: any[] = [];
  genderOptions.value.dataset.dimensions = dimensions;
  assignMapData(genderSource, 'gender');
  genderOptions.value.dataset.source = genderSource;
  genderOptions.value.series = series;

  // 注入年龄数据
  const ageSource: any[] = [];
  ageOptions.value.dataset.dimensions = dimensions;
  assignMapData(ageSource, 'age');
  ageOptions.value.dataset.source = ageSource;
  ageOptions.value.series = series;

  // 注入职业数据
  const careerSource: any[] = [];
  careerOptions.value.dataset.dimensions = dimensions;
  assignMapData(careerSource, 'career');
  careerOptions.value.dataset.source = careerSource;
  // 职业的y轴和x轴交换 左侧是行业名称 左侧增加间距 顺序颠倒
  careerOptions.value.series = series;
  careerOptions.value.grid = {
    left: '30%',
  };
  careerOptions.value.xAxis = {
    type: 'value',
  };
  careerOptions.value.yAxis = {
    type: 'category',
  };
  // 值大的在上面
  // careerOptions.value.series.reverse();
}
const getActiveKeyData = (item: any, index: number) => {
  if (props.showZs) {
    if (activeKey.value === 'payByrCntRate') {
      return (item[activeKey.value][index].value * 100).toFixed(2);
    } else {
      return item[activeKey.value][index].value;
    }
  } else {
    if (activeKey.value === 'payRateIndex') {
      return Trans.ratio(item[activeKey.value][index].value).replaceAll('%', '');
    } else if (activeKey.value.indexOf('Index') > -1) {
      return Trans.number(item[activeKey.value][index].value);
    } else {
      return item[activeKey.value][index].value;
    }
  }
}
calcOptions();
watch(() => props.brandLists, () => {
  nextTick(() => {
    calcOptions();
  });
}, {
  deep: true
});
watch(() => activeKey.value, () => {
  nextTick(() => {
    calcOptions();
  });
});
watch(() => props.showZs, () => {
  nextTick(() => {
    calcOptions();
  });
});
</script>

<template>
  <a-row type="flex" v-for="tab in tabs" style="justify-content: center;">
    <a-col v-for="item in tab" :key="item.key" span="3" style="padding: 5px 10px;">
      <div class="tab-item" v-if="Object.keys(item).length>0" :class="{
        active: activeKey === item.key
      }"
           @click="()=>activeKey=item.key"
      >
        {{ showZs ? item.titleZs : item.title }}
        <div style="color: #444;font-size: 12px;">
          <div v-if="brandLists.brand1">
            {{ brandLists.brand1.name }}
            <span v-if="item.key==='payRateIndex'">
              {{
                showZs ? (brandLists.brand1.CustomerPropertyPortrait['all'][item.key][0].value || 0.00).toFixed(0) : Trans.ratio(brandLists.brand1.CustomerPropertyPortrait['all'][item.key][0].value || 0.00)
              }}
            </span>
            <span v-else-if="item.key==='payByrCntRate'">
              {{ ((brandLists.brand1.CustomerPropertyPortrait['all'][item.key][0].value || 0.00) * 100).toFixed(2) }}%
            </span>
            <span v-else-if="item.key.indexOf('Index')>-1">
              {{
                showZs ? (brandLists.brand1.CustomerPropertyPortrait['all'][item.key][0].value || 0.00).toFixed(0) : Trans.number(brandLists.brand1.CustomerPropertyPortrait['all'][item.key][0].value || 0.00)
              }}
            </span>
            <span v-else>
              {{ brandLists.brand1.CustomerPropertyPortrait['all'][item.key][0].value || 0.00 }}
            </span>
          </div>
          <div v-if="brandLists.brand2">
            {{ brandLists.brand2.name }}
            <span v-if="item.key==='payRateIndex'">
              {{
                showZs ? (brandLists.brand2.CustomerPropertyPortrait['all'][item.key][0].value || 0.00).toFixed(0) : Trans.ratio(brandLists.brand2.CustomerPropertyPortrait['all'][item.key][0].value || 0.00)
              }}
            </span>
            <span v-else-if="item.key==='payByrCntRate'">
              {{ ((brandLists.brand2.CustomerPropertyPortrait['all'][item.key][0].value || 0.00) * 100).toFixed(2) }}%
            </span>
            <span v-else-if="item.key.indexOf('Index')>-1">
              {{
                showZs ? (brandLists.brand2.CustomerPropertyPortrait['all'][item.key][0].value || 0.00).toFixed(0) : Trans.number(brandLists.brand2.CustomerPropertyPortrait['all'][item.key][0].value || 0.00)
              }}
            </span>
            <span v-else>
              {{ brandLists.brand2.CustomerPropertyPortrait['all'][item.key][0].value || 0.00 }}
            </span>
          </div>
          <div v-if="brandLists.brand3">
            {{ brandLists.brand3.name }}
            <span v-if="item.key==='payRateIndex'">
              {{
                showZs ? (brandLists.brand3.CustomerPropertyPortrait['all'][item.key][0].value || 0.00).toFixed(0) : Trans.ratio(brandLists.brand3.CustomerPropertyPortrait['all'][item.key][0].value || 0.00)
              }}
            </span>
            <span v-else-if="item.key==='payByrCntRate'">
              {{ ((brandLists.brand3.CustomerPropertyPortrait['all'][item.key][0].value || 0.00) * 100).toFixed(2) }}%
            </span>
            <span v-else-if="item.key.indexOf('Index')>-1">
              {{
                showZs ? (brandLists.brand3.CustomerPropertyPortrait['all'][item.key][0].value || 0.00).toFixed(0) : Trans.number(brandLists.brand3.CustomerPropertyPortrait['all'][item.key][0].value || 0.00)
              }}
            </span>
            <span v-else>
              {{ brandLists.brand3.CustomerPropertyPortrait['all'][item.key][0].value || 0.00 }}
            </span>
          </div>
        </div>

      </div>
    </a-col>
  </a-row>
  <a-row type="flex" style="justify-content: center;padding-top: 10px;">
    <a-col :span="21">
      <a-row type="flex">
        <a-col style="width: 33.333%;">
          <EChart :options="genderOptions" style="height: 300px;"/>
        </a-col>
        <a-col style="width: 33.333%;">
          <EChart :options="ageOptions" style="height: 300px;"/>
        </a-col>
        <a-col style="width: 33.333%;">
          <EChart :options="careerOptions" style="height: 300px;"/>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>

<style lang="less" scoped>
.tab-item {
  padding: 5px 10px;
  cursor: pointer;
  border: 2px solid #e8e8e8;
  border-radius: 5px;
  text-align: left;
  color: #222;
  //font-weight: bold;

  span {
    float: right;
  }

  &.active {
    //color: #1890ff;
    border: 2px solid #1890ff;
  }
}
</style>
